// 定义一个红绿灯类(构造函数)
// import "./img/1.jpeg";
// import "./img/2.jpeg";
// import "./img/3.jpeg";
function Light($box) {
  // 装红绿灯的容器
  this.box = document.querySelector($box);
  // 初始值
  this.index = 1;
  this.timer;
}

// 初始化图片方法
Light.prototype.init = function () {
  console.log('初始化图片');
  // 创建图片标签
  this.img = new Image();
  // 图片设置不可拖拽
  this.img.draggable = false;
  this.img.src = `../../img/${this.index}.jpeg`;
  // 添加到容器中
  this.box.appendChild(this.img);
  // 初始化完成之后绑定点击事件
};

// 绑定点击事件
Light.prototype.bindClick = function () {
  this.img.addEventListener('click', () => {
    this.index = (this.index % 3) + 1;
    // 修改图片地址
    this.img.src = `../../img/${this.index}.jpeg`;
  });
};

// 轮播
Light.prototype.carousel = function () {
  Light.prototype.timer = setInterval(() => {
    this.index += 1;
    if (this.index > 3) {
      this.index = 1;
    }
    this.img.src = `../../img/${this.index}.jpeg`;
  }, 1000);
};

// 移入
Light.prototype.immigrate = function () {
  this.img.addEventListener('mouseenter', () => {
    console.log('移入');
    clearInterval(this.timer);
  });
};

// 移出
Light.prototype.shift = function () {
  this.img.addEventListener('mouseleave', () => {
    console.log('移出');
    // eslint-disable-next-line no-undef
    b.carousel();
  });
};

// 顺序下-上
Light.prototype.order = function () {
  this.index = 3;
  this.img.src = `../../img/${this.index}.jpeg`;
  this.img.addEventListener('click', () => {
    this.index--;
    if (this.index < 1) {
      this.index = 3;
    }
    this.img.src = `../../img/${this.index}.jpeg`;
  });
};

// 实现顺序上-下
let a = new Light('.box1');
a.init();
a.bindClick();

// 实现自动播放上-下 (可控的, 鼠标移入不能播放, 松开继续播放)
let b = new Light('.box2');
b.carousel();
b.init();
b.immigrate();
b.shift();

// // 实现顺序下-上
let c = new Light('.box3');
c.init();
c.order();
